// less mixins
.bg() {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: rgba(55, 58, 71, 0.9);
    opacity: 0;
    -webkit-backface-visibility: hidden;
}


.pop{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  pointer-events: none;
  z-index: 16;
  .pop_bg{
    .bg;
  }
  .pop_content{
    // position: relative;
    border-radius: 0.3rem;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 85%;
    min-width: 290px;
    min-height: 5rem;
    height: 50%;
    background: #fff;
    text-align: center;
    z-index: 15;
    opacity: 0;
    //border-radius: 0.2rem;
    font-size: 0.6rem;
    overflow:hidden;
    -webkit-overflow-scrolling : touch;
    .loading{
        position: absolute;
        left: 0;
        top: 40%;
        right: 0;
        bottom: 50%;
    }
    .list-wrap{
        position: absolute;
        overflow:auto;
        height: 100%;
        width: 100%;
        z-index: 2;
    }
    ul.hlist{
      font-size: 0.6rem;
      position: relative;
      z-index: 10;
      li{
        border-top: 1px solid #ececec;
        &:first-child{
          border-top: none;
        }
        // &.active,&:hover{
        //   background: #f5f5f5;
        // }
      }
      .hbody{
        //border-radius: 0.2rem;
      }
      p{
        width: 90%;
        padding:2% 5%;
        text-align: left;
        // display: table;
        line-height: 1.5rem;
        // -webkit-animation-name: anim-close;
        // animation-name: anim-close;
        em{
          font-size: 0.7rem;
          color: #262626;
          text-align: left;
          display: inline-block;
          width: 85%;
        }
        span{
          font-size: 0.7rem;
          color: #ff7800;
          display: inline-block;
          text-align: left;
        }
      }
    }
  }
  &.active{
    .pop_bg{
      opacity: 1;
      pointer-events: auto;
    }
    .pop_content{
      pointer-events: auto;
      opacity: 1;
    //   -webkit-animation-name: anim-open;
    //   animation-name: anim-open;
      -webkit-animation-duration: 0.5s;
      animation-duration: 0.5s;
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      -webkit-animation-iteration-count: 1;
      animation-iteration-count: 1;

    }
  }
  .car_linkage{
    &.hlist{
      .hbody{
        background: #fbc44e;
        padding: 0;
        //border-bottom: 1px solid #cfcfcf;
        p{
          text-align: left;
          padding: 0.4% 5%;
        }
      }
      .hfoot{
        display: block;
        background: #fff;
        p{
          line-height: 1.5rem;
          width: 90%;
          margin: auto;
          text-align: left;
          border-bottom: 1px solid #ececec;
          &:last-child{
              border-bottom: none;
          }
          span{
            display: inline-block;
            color: #666;
            vertical-align: top;
            .img{
                width: 1.5rem;
                border: 0;
                margin-right: 1rem;
            }
          }
          &.active{
            color: #000;
          }
        }
        &.active{
          background: #ececec;
        }
      }
    }
    &.car_linkage2{
      .hfoot{
        p{
          text-align: left;
        }
      }
    }
  }
}
.Nocom{
    position: absolute;
    top: 45%;
    left: 36%;
}

// @-webkit-keyframes anim-open {
// 	0% { opacity: 0; -webkit-transform: scale3d(1.3, 1.3, 1); }
//     30%{ opacity: 1; -webkit-transform: scale3d(1, 1, 1);}
//     50%{ opacity: 1; -webkit-transform: scale3d(1, 1, 1);}
//     80%{ opacity: 1; -webkit-transform: scale3d(1, 1, 1);}
// 	100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); }
// }
//
// @keyframes anim-open {
// 	0% { opacity: 0; -webkit-transform: scale3d(1.3, 1.3, 1); transform: scale3d(1.3, 1.3, 1); }
//     30%{ opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}
//     50%{ opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}
//     80%{ opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}
// 	100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
// }
//
// @-webkit-keyframes anim-close {
//     0% { opacity: 1; }
//     30% { opacity: 1; }
// 	80% { opacity: 1; }
// 	100% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 1); }
// }
//
// @keyframes anim-close {
// 	0% { opacity: 1; }
//     30% { opacity: 1; }
// 	80% { opacity: 1; }
// 	100% { opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 1); transform: scale3d(0.5, 0.5, 1); }
// }

#sidepop-box{
    .sidepop-bg{
        .bg();
        position: fixed;
        width: 100%;
        z-index: 1;
        left: -100%;
        &.active{
          opacity: 1;
          left: 0;
          pointer-events: auto;
        }
    }
    .sidepop{
    	width: 80%;
    	height: 100%;
    	background-color: #fff;
    	position: fixed;
    	left:0;
    	top: 0;
        z-index: 2;
            transform: translate3d(-1000px,0,0);
    	&.active{
    		-webkit-animation-name: anim-sideopen;
            animation-name: anim-sideopen;
            -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    	}
    }
}



@-webkit-keyframes anim-sideopen {
	0% {
        transform: translate3d(-1000px,0,0);
    }
	100% {
        transform: translate3d(0,0,0);

    }
}

@keyframes anim-sideopen {
	0% {
        transform: translate3d(-1000px,0,0);
    }
	100% {
        transform: translate3d(0,0,0);

    }
}
/*alert*/
.alert{
    display:-webkit-box;-webkit-box-align: center;-webkit-box-pack: center;
    .pop_content{
        height:auto; min-height: auto; position:relative; background:#fff; border-radius:0.3rem;
        .alertTit{
            border-bottom:1px solid #d9d9d9; padding:0.5rem 0; color:#333; text-align: center; font-size:0.75rem;
            i{margin-right:0.5rem; color:#ff9000;position:relative; top:-0.02rem; font-size:0.9rem;}
        }
        .alertCon{height:5rem; line-height:5rem; color:#555; font-size:0.725333rem;}
        .alertBtn{border-top:1px solid #d9d9d9; font-size:0.7rem; border-radius:0 0 0.3rem 0.3rem; padding:0.5rem 0; color:#0079ff; background:#f5f5f5;}
    }
}
/*修改弹窗样式-自适应*/
.autoPop{
    display:-webkit-box;-webkit-box-align: center;-webkit-box-pack: center;
    .pop_content{
        position:relative;
        height:auto;
        min-height:inherit;
        .list-wrap{
            position:relative;
            height:auto;
        }
    }
}

.autoTip{
    position:fixed; left:0; top:0; width:100%; height:100%; overflow:hidden; z-index:100;
    :first-child{
      background:rgba(0,0,0,.5); color:#fff; padding:0.5rem 1.2rem; border-radius:0.2rem; font-size:0.7rem;
    }
}
